<!-- here is the script that will do the ajax. It is triggered when the form is submitted -->
<script type="text/javascript">
function fillTable()
{
	$('#datatable').dataTable( {
		"bDestroy": true,
        "ajax": "<?php echo base_url() ?>administrator/owner/load_list/<?PHP echo $type ?>"
    } );
}

function closeModal()
{
	 $('#add-modal').modal('hide');
	 $('#edit-modal').modal('hide');
}

function deleteData(id)
{
	var result = confirm("Are you sure to delete this data?");
	if (result) 
	{
		//Logic to delete the item

		var form_data = {
			id: id,
			ajax: '1'   
		  };

		  $.ajax({
			url: "<?php echo base_url() ?>administrator/owner/delete",
			type: 'POST',
			data: form_data,
			success: function() {
			   fillTable();
               showDeleteNotification();
			}
		  });
		  
		  return false;
	}	
}

function editData(id)
{
	$.getJSON("<?php echo base_url() ?>administrator/owner/edit/" + id, function(data){
	  $.each(data, function(i,item){
		  
		  $("#id_edit").val(item['id']);
		  $("#title_edit").val(item['title']);
		  CKEDITOR.instances['content_edit'].setData(item['content']),
		  $("#status_edit").val(item['status']);
		  $('#edit-modal').modal('toggle');
	  });
	});
}

$(function(){	
	
	fillTable();
    $('#save-button').click(function() {
      var form_data = {
        title: $('#title').val(),
        content: CKEDITOR.instances['content'].getData(),
		status: $('#status').val(),
		type: '<?php echo $type ?>',
        ajax: '1'   
      };

      $.ajax({
        url: "<?php echo base_url(); ?>administrator/owner/add",
        type: 'POST',
        data: form_data,
        success: function() {
		   closeModal();
		   fillTable();
           showSaveNotification();
        }
      });

      return false;
    });
	
	$('#update-button').click(function() {
      var form_data = {
		id: $('#id_edit').val(),
		title: $('#title_edit').val(),
        content: CKEDITOR.instances['content_edit'].getData(),
		status: $('#status_edit').val(),
        ajax: '1'   
      };

      $.ajax({
        url: "<?php echo base_url()?>administrator/owner/update",
        type: 'POST',
        data: form_data,
        success: function() {
		   closeModal();
		   fillTable();
           showUpdateNotification();
        }
      });

      return false;
    });
	
});

</script>

<div class="col-md-12 ">
    <div class="alert alert-success save-notif hide">
        <strong>Success!</strong> New record has been added.
    </div>

    <div class="alert alert-info update-notif hide">
        <strong>Success!</strong> You have to change the data .
    </div>

    <div class="alert alert-warning delete-notif hide">
        <strong>Warning!</strong> The record has been deleted.
    </div>
    <!-- BEGIN Portlet PORTLET-->
    <div class="portlet box blue-hoki">
        <div class="portlet-title">
            <div class="caption">
                <i class="fa fa-list"></i>List of <?php echo ucfirst($type) ?> Content
            </div>
            <div class="actions">
                <a class="btn btn-default btn-sm" data-toggle="modal" href="#add-modal">
                <i class="fa fa-plus"></i> Add </a>
                <a class="btn btn-icon-only btn-default btn-sm fullscreen" href="javascript:;" data-original-title="" title="">
                </a>
            </div>
        </div>
        <div class="portlet-body">
            <table class="table table-striped table-hover table-bordered" id="datatable">
                <thead>
                    <tr>
                        <th>Title</th>
						<th>Created By</th>
                        <th>Status</th>
						<th>Action</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
    </div>
    <!-- END Portlet PORTLET-->
</div>
<!-- END Column -->
<div class="modal bs-modal-lg fade" id="add-modal" tabindex="-1" role="basic" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title">Add New Content</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form">
                <div class="form-body">
                    <div class="form-group">
                        <label class="col-md-3 control-label">Title</label>
                        <div class="col-md-9">
                            <input type="text" id="title" class="form-control input-medium" placeholder="Enter title">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">Content</label>
                        <div class="col-md-9">
                            <textarea class="ckeditor form-control" id="content" name="editor1" rows="6"></textarea>
                        </div>
                    </div>
					<div class="form-group">
						<label class="col-md-3 control-label">Publish Status</label>
						<div class="col-md-9">
							<select id="status" class="form-control input-medium">
								<option value="" style="color:#ccc !important;">Select Publish Status</option>
								<option value="1">Publish</option>
								<option value="0">Unpublish</option>
							</select>
						</div>
					</div>
                </div>
            </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn default" data-dismiss="modal">Close</button>
                <button type="button" id="save-button" class="btn blue">Save changes</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

<div class="modal bs-modal-lg fade" id="edit-modal" tabindex="-1" role="basic" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title">Add New Content</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form">
                <div class="form-body">
                    <div class="form-group">
                        <label class="col-md-3 control-label">Title</label>
                        <div class="col-md-9">
							<input type="hidden" id="id_edit">
                            <input type="text" id="title_edit" class="form-control input-medium" placeholder="Enter title">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">Content</label>
                        <div class="col-md-9">
                            <textarea class="ckeditor form-control" id="content_edit" name="editor1" rows="6"></textarea>
                        </div>
                    </div>
					<div class="form-group">
						<label class="col-md-3 control-label">Publish Status</label>
						<div class="col-md-9">
							<select id="status_edit" class="form-control input-medium">
								<option value="" style="color:#ccc !important;">Select Publish Status</option>
								<option value="1">Publish</option>
								<option value="0">Unpublish</option>
							</select>
						</div>
					</div>
                </div>
            </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn default" data-dismiss="modal">Close</button>
                <button type="button" id="update-button" class="btn blue">Save changes</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>